import React, {useState} from 'react';
import {Button, Input, message, Space} from "antd";
import {PoweroffOutlined, UserOutlined} from "@ant-design/icons";
import {ProxyConfigClass} from "../../../Util/Proxy";
import axios from "axios";

const Index = () => {
    var  [loadings] = useState([]);
    var [passwordVisible, setPasswordVisible,username,password] = React.useState(false);
    var urlPrefix="/api"
    const enterLoading = (index) => {
        const name=username.input.value
        const  pawd=password.input.value
        if (!ProxyConfigClass.isProxy) {
            urlPrefix=ProxyConfigClass.isGoLongUrt
        }
        axios.post(urlPrefix+"/login/useradd",{
            data:{
                username:name,
                password:pawd
            }
        }).then(function (response) {
            var res = response.data;
            console.log(res)
            if(res.msg===("注册成功")) {
                message.success("注册成功")
            }else  {
                message.error(res.msg)
            }
        }).catch(function (error) {
            alert(error);
        });
    }
    return (
        <div>
            <Input size="50px,50px,50px" placeholder="用戶名" prefix={<UserOutlined />} style={{width:275}} ref={(c)=>{username=c}} />
            <br/>
            <br/>
            <Space direction="horizontal">
                <Input.Password
                    placeholder="密码"

                    visibilityToggle={{ visible: passwordVisible, onVisibleChange: setPasswordVisible }} ref={(c)=>{password=c}}/>
                <Button
                    type="primary"
                    icon={<PoweroffOutlined />}
                    loading={loadings[1]}
                    onClick={() => enterLoading(1)}
                >
                    注册
                </Button>
            </Space>
        </div>
    );
};

export default Index;
